<template>
  <div class="sales-view">
   <el-card shadow="hover">
     <template v-slot:header>
       <div class="menu-wapper">
         <el-menu
           mode="horizontal"
           default-active="1"
           @select="salesMenuSelect"
           class="el-menu-sales-view"
         >
           <el-menu-item index="1">
             销售额
           </el-menu-item>
           <el-menu-item index="2">
             访问量
           </el-menu-item>
         </el-menu>
         <div class="menu-wapper-right">
           <el-radio-group
             v-model="redioSelect"
             size="small"
           >
             <el-radio-button label="今日">今日</el-radio-button>
             <el-radio-button label="本周">本周</el-radio-button>
             <el-radio-button label="本月">本月</el-radio-button>
             <el-radio-button label="今年">今年</el-radio-button>
           </el-radio-group>
           <el-date-picker
             v-model="date"
             type="daterange"
             :picker-options="pickerOptions"
             unlink-panels
             size="small"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             class="sales-view-date">
           </el-date-picker>
         </div>
       </div>
     </template>
     <template>
       <div class="sales-view-chart-wrapper">
         <v-chart :options="SalesOption"/>
         <div class="sales-view-list-wrapper">
          <div class="sales-view-title">排行榜</div>
           <div class="sales-view-list" v-for="item in rankDate" :key="item.no">
             <div :class="['sales-view-list-no', +item.no <= 3 ? 'top-no':'' ]">{{ item.no }}</div>
             <div class="sales-view-list-name">{{ item.name }}</div>
             <div class="sales-view-list-money">{{ item.money }}</div>
           </div>
         </div>
       </div>
     </template>
   </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      redioSelect: "今年",
      date: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      rankDate: [
        {
          no: 1,
          name: '肯德基',
          money: '323, 234'
        },
        {
          no: 2,
          name: '麦当劳',
          money: '299,132'
        },
        {
          no: 3,
          name: '肯德基',
          money: '283,998'
        },
        {
          no: 4,
          name: '海底捞',
          money: '266,223'
        },
        {
          no: 5,
          name: '西贝筱面村',
          money: '223,445'
        },
        {
          no: 6,
          name: '汉堡王',
          money: '219,663'
        },
        {
          no: 7,
          name: '真功夫',
          money: '200,997'
        }
      ],
      SalesOption: {
        title: {
          text: '年度销售数据',
          textStyle: {
            fontSize: 12,
            color: '#666'
          },
          left: 10
        },
        xAxis: {
          type: 'category',
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#999'
            }
          }
        },
        series: {
          type: 'bar',
          data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
          barWidth: '35%'
        },
        color: ['#3398DB'],
        tooltip: {},
        grid: {
          left: 40,
          right: 60,
          top: 50,
          bottom: 40
        }
      }
    }
  },
  methods: {
    salesMenuSelect(index) {
      console.log(index)
    }
  }
}
</script>

<style lang="scss">
.sales-view {
  margin-top: 20px;
}
.menu-wapper{
  display: flex;
  position: relative;

  .el-menu-sales-view{
    width: 100%;
    padding-left: 20px;
    .el-menu-item{
      height: 50px;
      line-height: 50px;
      margin: 0 20px;
    }
  };
  .menu-wapper-right{
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    height: 50px;
    .sales-view-date{
      margin-left: 20px;
    }
  }
}

.sales-view-chart-wrapper{
  display: flex;
  height: 270px;
  .echarts{
    width: 70%;
  }
  .sales-view-list-wrapper{
    flex: 1;
    .sales-view-title{
      font-size: 12px;
      color: #666;
      font-weight: 500;
      margin-bottom: 12px;
    }
    .sales-view-list{
      display: flex;
      align-items: center;
      font-size: 12px;
      height: 20px;
      padding: 6px 0px;
      .sales-view-list-no{
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .top-no{
        color: #fff;
        background: black;
        border-radius: 50%;
      }
      .sales-view-list-name{
        margin-left: 10px;
      }
      .sales-view-list-money{
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>
